<template>
	<view>
		<view class="field-list">
			<view class="field-item">
				<text>{{$t('operate.name')}}</text> <!--名称-->
				<view class="right">
					<block v-if="locale=='zh'">{{listInfo.name}}</block>
					<block v-if="locale=='en'">{{listInfo.enName}}</block>
					<block v-if="locale=='ita'">{{listInfo.itName}}</block>
				</view>
			</view>
			<view class="field-item">
				<text>{{$t('operate.categoryIcon')}}</text><!--分类图标-->
				<view class="right">
					<u-upload :action="action" ref='upload' :header="headers" @on-success="(res)=> uploadImg(res)"
						@on-remove="(index)=>deletePic(index)" name="multipart" :max-count="1" :custom-btn="true"
						width="80" height="80" :show-progress="false" :file-list="fileListImg"
						style="overflow:auto !important;">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="plus" size="48" color="#c0c4cc"></u-icon>
						</view>
					</u-upload>
					<!-- <image class="image" :src="listInfo.extra"></image> -->
				</view>
			</view>
			<view class="field-item">
				<text>{{$t('operate.markupRate')}}</text><!--加价率-->
				<view class="right">
					<input v-model="listInfo.ratio" :placeholder="$t('publicLang.pleaseEnter')" placeholder-class="placeholderClass">
					<text class="iconfont iconarrow-right1"></text>
				</view>
			</view>
			<view class="field-item">
				<text>{{$t('operate.homeTab')}}</text><!--首页tab-->
				<view class="right">
					<u-switch v-model="listInfo.isAdvice" size="40" active-color="#000000"></u-switch>
				</view>
			</view>
			<view class="field-item">
				<text>{{$t('operate.enabledState')}}</text><!--启用状态-->
				<view class="right">
					<u-switch v-model="listInfo.status" size="40" active-color="#000000"></u-switch>
				</view>
			</view>
		</view>
		<view class="bottomBox" :style="{paddingBottom: `${bottomLift}px`}">
			<view class="button">
				<view class="add-button" @click="addClick">{{$t('publicLang.save')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_REQUEST_URL,
		TOKENNAME
	} from "@/config/app";
	import * as categoryApiMc from "@/api/categoryApi.js";
	export default {
		data() {
			return {
				bottomLift: app.globalData.bottomLift,
				listInfo: {},
				isAdvice: '',
				fileListImg:[],
				action: "",
				headers: "",
			}
		},
		computed: {
			...mapGetters(["token", "secondHand"]),
			locale() {
				return this.$i18n.locale
			}
		},
		onLoad() {
			this.action = `${HTTP_REQUEST_URL}api/admin/upload/oss/image?model=content&pid=0`;
			this.headers = {
				[TOKENNAME]: this.token,
			};
			console.log(123)
			let _this = this
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('detailsData', function(data) {
				if (_this.fileListImg.length > 0) {
					_this.$refs.upload.clear();
					_this.fileListImg = [];
				}
				_this.listInfo = data.data
				if (_this.listInfo.extra){
					_this.fileListImg.push({
						url: _this.listInfo.extra
					});
				}
				
				// _this.listInfo.ratio = Number(_this.listInfo.ratio)
				_this.isAdvice = data.data.isAdvice
				console.log(data.data)
			})
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.categoryDetails')
			});
		},
		methods: {
			addClick() {
				console.info(this.listInfo)
				if (this.listInfo.ratio == '') {
					return this.$util.Tips({
						title: this.$t('operate.markupRateCannotBeEmpty')  //加价率不能为空
					});
				}
				var reg = /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/;
				if (!reg.test(this.listInfo.ratio)) {
					return this.$util.Tips({
						title: this.$t('operate.incorrectMarkupRate')  //加价率不正确
					});
				}
				let _this = this

				// _this.$nextTick(function(){
				// 	var p = new Promise(function(resolve, reject) {
				// 		let data = {
				// 			cateId: _this.listInfo.id,
				// 			ratio: _this.listInfo.ratio,
				// 		}
				// 		categoryApiMc.categroyRatioUpdate(data).then(res => {
				// 			resolve()
				// 		})
				// 	});
				// 	var p1 = new Promise(function(resolve, reject) {
				// 		let dataAdvice = {
				// 			id: _this.listInfo.id,
				// 			type: _this.listInfo.type,
				// 			status: _this.listInfo.status,
				// 			isAdvice: _this.listInfo.isAdvice ? 1 : 0,
				// 		}
				// 		if (_this.isAdvice != dataAdvice.isAdvice){
				// 			categoryApiMc.adviceCategory(dataAdvice).then(res => {
				// 				resolve()
				// 			})
				// 		}else{
				// 			resolve()
				// 		}

				// 	});
				// 	Promise.all([p1, p]).then(function(values) {
				// 		_this.$util.Tips({
				// 			title: '编辑成功'
				// 		});
				// 		setTimeout(function() {
				// 			const eventChannel = _this.getOpenerEventChannel();
				// 			eventChannel.emit('someEvent', {
				// 				data: ''
				// 			});
				// 			uni.navigateBack()
				// 		}, 1500);
				// 	});
				// })


				let data = {
					id: _this.listInfo.id,
					cateId: _this.listInfo.id,
					ratio: _this.listInfo.ratio,
					status: _this.listInfo.status,
					extra: _this.listInfo.extra,
				}
				let dataAdvice = {
					id: _this.listInfo.id,
					type: _this.listInfo.type,
					status: _this.listInfo.status,
					isAdvice: _this.listInfo.isAdvice ? 1 : 0,
				}
				categoryApiMc.adviceCategory(dataAdvice).then(res => {
					categoryApiMc.categroyRatioUpdate(data).then(res => {
						_this.$util.Tips({
							title: _this.$t('operate.editedSuccessfully')
						});
						setTimeout(function() {
							const eventChannel = _this.getOpenerEventChannel();
							eventChannel.emit('someEvent', {
								data: ''
							});
							uni.navigateBack()
						}, 1500);
					})
					categoryApiMc.updCategory(data).then(res => {
					})
				})

			},
			uploadImg(res, type, index) {
				console.info(res)
				//商品主图
				this.listInfo.extra = res.data.url;
			},
			// 删除图片
			deletePic(index, type, index1) {
				//商品主图
				this.listInfo.extra = "";
			},
			
			
		}
	}
</script>

<style lang="scss">
	.field-list {
		background-color: #FFFFFF;

		.field-item {
			color: #666666;
			height: 108rpx;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F5F5F8;

			.right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				text-align: right;
				margin-left: 20rpx;
				.image {
					width: 80rpx;
					height: 80rpx;
					border: 1rpx solid #F1F1F1;
				}

				.notEntered {
					display: flex;
					align-items: center;
					color: #BBBBBB;
				}

				.iconfont {
					font-size: 20rpx;
				}

				.placeholderClass {
					color: #BBBBBB;
				}

				input {
					width: 100%
				}
			}
			.right ::v-deep .u-delete-icon {
				width: 30rpx;
				height: 30rpx;
				top: 0rpx;
				right: 0rpx;
			}
		}
	}

	.tips {
		color: #BBBBBB;
		font-size: 20rpx;
		margin: 45rpx 40rpx;
	}

	.bottomBox {
		background-color: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.button {
		width: 100%;
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-button {
		width: 690rpx;
		height: 92rpx;
		background-color: #111111;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 92rpx;
	}
</style>
